<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 2.定义路由连接
				router-link:解析之后，变为a标签。
				to:解析之后，变为href属性
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			
			<!-- 3.定义路由填充位，该位置用来展现具体页面(组件)-->
			<router-view></router-view>
		</div>
		<!-- 4.2定义组件模块 -->
		<template id="userTem">
			<div>
				<h1>我是组件的内容！</h1>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h1>养只宠物</h1>
				
			</div>
		</template>
		
		
		<!-- 1.引入vue.js函数类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<!-- 引入路由js规则,导入的顺序不能颠倒 -->
		<script src="../js/vue-router.js"></script>
		<script>
			/* 4.定义组件 */
			let user = {
				//4.1定义页面
				template:'#userTem'

			}
			let dog = {
				template:'#dogTem'
			}
			
			//5.定义路由对象，定义路由规则
			let router = new VueRouter({
				//定义路由规则
				routes:[
						//利用redirect实现路由重定向
						{path:"/",redirect:"/user"},
						{path:"/user",component:user},
						{path:"/dog",component:dog}
						
				]
				
			})
			//6.将路由对象交个vue对象管理
			const vue = new Vue({
				el:"#app",
				//绑定路由
				//router: router    名称一致，可以简化
				router
			})
			
			
		</script>
		
		
		
	</body>
</html>
